<template>
	<view class="content">
		<text class="title">注册</text>
		<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm" labelWidth="70">
			<u-form-item label="用户名" prop="username" borderBottom ref="item1">
				<u--input v-model="formData.username" border="none" placeholder="请输入用户名"></u--input>
			</u-form-item>
			<u-form-item label="手机号" prop="phone" borderBottom ref="item1">
				<u--input v-model="formData.phone" border="none" placeholder="请输入手机号"></u--input>
			</u-form-item>
			<u-form-item label="账号" prop="account" borderBottom ref="item1">
				<u--input v-model="formData.account" border="none" placeholder="请输入账号"></u--input>
			</u-form-item>
			<u-form-item label="密码" prop="password" borderBottom ref="item1">
				<u--input v-model="formData.password" border="none" placeholder="请输入密码" clearable password
					maxlength="16"></u--input>
			</u-form-item>
			<u-form-item label="确认密码" prop="comfirmPwd" borderBottom ref="item1">
				<u--input v-model="formData.comfirmPwd" border="none" placeholder="请再次输入密码" clearable password
					maxlength="16"></u--input>
			</u-form-item>
			<u-button type="primary" text="注册" color="#1678ff" @click="submit" class="btn"></u-button>
		</u--form>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					account: '',
					password: '',
					comfirmPwd: '',
					username: '',
					phone: ''
				},
				rules: {
					'username': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change']
					},
					'phone': {
						asyncValidator: (rule, value, callback) => {
							if (!
								/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/
								.test(value)) {
								callback(new Error('请输入正确手机号'));
							} else {
								// 如果校验通过，也要执行callback()回调
								callback();
							}
						},
						trigger: ['blur', 'change']
					},
					'account': {
						type: 'string',
						required: true,
						message: '请填写账号',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
					'comfirmPwd': {
						asyncValidator: (rule, value, callback) => {
							if (value.toLowerCase() != this.formData.password.toLowerCase()) {
								callback(new Error('两次密码输入不一致'));
							} else {
								// 如果校验通过，也要执行callback()回调
								callback();
							}
						},
						trigger: ['blur', 'change']
					},
				},
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
					this.$api.register({
						name: this.formData.username,
						userName: this.formData.account,
						comfirmPwd: this.formData.comfirmPwd,
						password: this.formData.password,
						phone: this.formData.phone,
					}).then(res => {
						// console.log(res)
						this.$refs.uToast.show({
							type: 'success',
							message: res.msg,
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/login/login'
							})
						}, 2000)
					})
				}).catch(errors => {
					this.$refs.uToast.show({
						type: 'error',
						message: '请输入完整内容！',
					})
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.logo {
			margin-top: 100rpx;
			width: 200rpx;
		}

		.title {
			text-align: center;
			font-size: 34rpx;
			font-weight: bold;
			margin: 40rpx 0;
		}

		.u-form {
			display: flex;
			flex-direction: column;
		}

		.u-form-item {
			margin-bottom: 20rpx;

			.verificationCodeInput {
				height: 90%;
			}
		}

		.btn {
			margin-top: 20rpx;
		}

		.btn-text {
			width: 100%;
			text-align: center;
			margin-top: 40rpx;
			font-size: 32rpx;
			color: #1678ff;
		}
	}
</style>